<template>  
  <div>  
    <div id="DirectoryTree-box">  
      <div class="content">  
        <h5>图层目录树</h5>  
        <!-- 目录树 -->  
        <el-tree  
          :data="dataTree"  
          show-checkbox  
          node-key="id"  
          :default-expanded-keys="[100, 101]"  
          :default-checked-keys="defaultKeys"  
          @check-change="handleCheckChange"  
          :props="defaultProps"  
        >  
          <!-- 自定义节点内容 -->  
          <template v-slot="{ node }">  
            <span>  
              <!-- 这里可以根据节点的类型显示不同的图标 -->  
              <i :class="getIconClass(node)"></i>  
              {{ node.label }}  
            </span>  
          </template>  
        </el-tree>  
      </div>  
    </div>  
  </div>  
</template>  

<script>  
import { docLayer } from '@/Hooks/initMap.js'  
var icon
var docCatalog  
export default {  
  name: 'DirectoryTree',  
  data() {  
    return {  
      defaultKeys: [],  
      dataTree: [  
        {  
          id: 100,  
          label: '地图文档',  
          disabled: true,  
          icon: "icon-map",  
          children: [  
            {  
              id: 101,  
              label: '光谷智慧交通',  
              disabled: true,  
              children: [],  
              // icon: "icon-tucengshunxu",  
              // iconClass: 'custom-icon'   
            }  
          ]  
        }  
      ],  
      defaultProps: {  
        children: 'children',  
        label: 'label',  
        // icon 属性不会再传递给节点了，因为我们将直接在模板中定义  
      }  
    }  
  },  
  created() {  
    this.getTreeData()  
    this.setDefaultKeys()  
  },  
  methods: {  
    getTreeData() {  
      docCatalog = new Zondy.Catalog.MapDoc({  
        ip: 'localhost',  
        port: 6163,  
        docName: 'guanggu'  
      })  

      docCatalog.getLayersInfo((data) => {  
        data.value.forEach((item,index) => { 
          if(index!=5)
          {
            console.log(item.GeomType,9990) 
            icon = this.getNodeIcon(item.GeomType); // 获取节点图标  
            this.dataTree[0].children[0].children.push({  
              id: item.LayerIndex,  
              label: item.Name,  
              icon // 这里可以保留图标的类名，也可以不必要  
            })  
            this.defaultKeys.push(item.LayerIndex)  
          }
        })  
      })  
    },  
    setDefaultKeys() {  
      setTimeout(() => {  
        let stempKeys = this.defaultKeys.slice(0)  
        this.defaultKeys = stempKeys  
      }, 1000)  
    },  
    handleCheckChange(data, checked) {  
      if (checked) {  
        docLayer.setLayerStatus(data.id, 'include')  
      } else {  
        docLayer.setLayerStatus(data.id, 'exclude')  
      }  
    },  
    getNodeIcon(geomType) {  
      console.log(geomType,9980)
      switch (geomType) {  
        case "Reg":  
          return "icon-quyu"; // 区域图标  
        case "Lin":  
          return "icon-xianlu-xian"; // 线路图标  
        case "Pnt":  
          return "icon-dian"; // 点图标  
        default:  
          return ""; // 默认图标  
      }  
    },  
    getIconClass(node) {  
      console.log(node.data.id,99910)
      if(node.data.id==0||node.data.id==1)
      return node.data.icon
    else if(node.data.id==2)
      return "icon-shijian"
    else if(node.data.id==3)
    return "icon-shexiangtou"
  else if(node.data.id==4)
      return "icon-jingwu"
      // // 根据节点 ID 或标签获取相应的图标类  
      // if (node.id === 100) return "icon-map"; // 示例：特定节点  
      // if (node.id === 101) return "icon-tucengshunxu"; // 示例：特定节点  
      // return this.getNodeIcon(node.geomType); // 树节点可能有 geomType 属性  
    }  
  }  
}  
</script>  

<style > 
.icon-jingwu {
  display:inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../img/shijian.png');
  background-size: cover;
}
.icon-shijian {
  display:inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../img/jingwu.png');
  background-size: cover;
}
.icon-shexiangtou {
  display:inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../img/shexiangtou.png');
  background-size: cover;
} 
/* 点图标样式 */
.icon-dian {
  display:inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../assets/icons/point.png');
  background-size: cover;
}

/* 线路图标样式 */
.icon-xianlu-xian {
  display:inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../img/daolu.png');
  background-size: cover;
}

/* 区域图标样式 */
.icon-quyu {
  display:inline-block;
  width: 16px !important;
  height: 16px !important;
  background-image: url('../img/image.png');
  background-size: cover;
}
#DirectoryTree-box {  
  position: absolute;  
  top: 130px;  
  right: 10px;  
  z-index: 200;  
  width: 200px;  
  height: 380px;  
  background: white;  
  
}  

.content h5 {  
  padding: 5px 10px;  
  color: white;  
  text-align: center;  
  background: #409eff;  
}  
</style>  